<template>
    <view class="box">
        <view class="bg">
            <p>我的资料</p>
        </view>
        <view class="box-box">
            <!-- 1. 顶部个人信息 -->
            <view class="header">
                <view class="avatar-container">
                    <image class="avatar"
                        :src="user.cover && user.cover.length > 0 ? user.cover[0] : '/static/icons/default-avatar.png'"
                        mode="aspectFill" />
                </view>
                
                <!-- 用户基本信息 -->
                <view class="user-basic-info">
                    <text class="user-name">{{ user.name || '未设置' }}</text>
                    <view class="user-details">
                        <text class="user-detail-item" v-if="user.sex">{{ user.sex === 1 ? '男' : '女' }}</text>
                        <text class="user-detail-item" v-if="user.myInfo && user.myInfo.age">{{ user.myInfo.age }}岁</text>
                        <text class="user-detail-item" v-if="user.myInfo && user.myInfo.height">{{ user.myInfo.height }}cm</text>
                        <text class="user-detail-item" v-if="user.myInfo && user.myInfo.zodiac">{{ user.myInfo.zodiac }}</text>
                        <text class="user-detail-item vip-badge" v-if="user.vip">VIP会员</text>
                    </view>
                </view>
                
                <!-- 统计信息 -->
                <view class="stats-section" v-if="user.pv || user.recommendCount || user.wishCount || user.collectCount">
                    <view class="stats-item" v-if="user.pv">
                        <text class="stats-number">{{ user.pv }}</text>
                        <text class="stats-label">浏览量</text>
                    </view>
                    <view class="stats-item" v-if="user.recommendCount">
                        <text class="stats-number">{{ user.recommendCount }}</text>
                        <text class="stats-label">推荐数</text>
                    </view>
                    <view class="stats-item" v-if="user.wishCount">
                        <text class="stats-number">{{ user.wishCount }}</text>
                        <text class="stats-label">心愿数</text>
                    </view>
                    <view class="stats-item" v-if="user.collectCount">
                        <text class="stats-number">{{ user.collectCount }}</text>
                        <text class="stats-label">收藏数</text>
                    </view>
                </view>

                <view class="info_box">
                    <text class="info-text">
                        为了打造100%真实的交友平台，个人资料请如实填写，不真实或走心的资料审核将会被拒绝。
                    </text>
                </view>
                <view class="section-header">
                    <text class="section-title">我的相册</text>
                    <!-- <text class="edit-link" @click="picture = true">编辑></text> -->
                </view>
                <view class="photo-container">
                    <view class="photo-item" v-for="(photo, index) in user.cover" :key="index"
                        @click="previewImage(index)">
                        <image :src="photo" class="uploaded-image" mode="aspectFill"></image>
                    </view>
                </view>


            </view>

            <!-- 3. 我的认证 -->
            <!-- <view class="section">
                <view class="section-header">
                    <text class="section-title">我的认证</text>
                    <text class="edit-link" @click="attestation">编辑></text>
                </view>
                <view class="icons-container">
                    <view class="icon-item" v-for="(item, index) in verifications" :key="index">
                        <view class="icon-circle" :style="{ background: item.bgColor }">
                            <image class="icon" :class="item.icon" mode="aspectFit" />
                        </view>
                        <text class="icon-text">{{ item.label }}</text>
                    </view>
                </view>
            </view> -->

            <!-- 4. 关于我 -->
            <view class="section">
                <view class="section-header">
                    <text class="section-title">关于我</text>
                    <!-- <text class="edit-link" @click="onaboutme">编辑></text> -->
                </view>
                <view class="section_box" v-if="user.myInfo && user.myInfo.description">
                    <text class="about-me">{{ user.myInfo.description }}</text>
                </view>
                <view class="section_box" v-else>
                    <text class="about-me">做个自我介绍，让对方更了解你，可以讲讲你的求学经历、家庭背景、性格爱好等，请勿填写联系方式哦~</text>
                </view>
            </view>


            <!-- 基本资料 -->
            <view class="section">
                <view class="section-header">
                    <text class="section-title">基本资料</text>
                    <text class="edit-link" @click="editSection">编辑></text>
                </view>
                <view class="section_box">
                    <view class="basic-info-box">
                        <!-- 年龄 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.age">
                            <text>🎂</text>
                            <text>{{ user.myInfo.age }}岁</text>
                        </view>
                        <!-- 星座 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.zodiac">
                            <text>🌟</text>
                            <text>{{ user.myInfo.zodiac }}</text>
                        </view>
                        <!-- 学历 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.degree">
                            <text>🎓</text>
                            <text>{{ user.myInfo.degree }}</text>
                        </view>
                        <!-- 现居地址 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.address">
                            <text>📍</text>
                            <text>现居 {{ user.myInfo.address }}</text>
                        </view>
                        <!-- 职业 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.career">
                            <text>💼</text>
                            <text>{{ user.myInfo.career }}</text>
                        </view>
                        <!-- 资产状况 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.asset">
                            <text>🏠</text>
                            <text>{{ user.myInfo.asset }}</text>
                        </view>
                        <!-- 婚姻状况 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.marriage">
                            <text>💍</text>
                            <text>{{ user.myInfo.marriage }}</text>
                        </view>
                        <!-- 子女情况 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.childs">
                            <text>👶</text>
                            <text>{{ user.myInfo.childs }}</text>
                        </view>
                        <!-- 月收入 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.income">
                            <text>💰</text>
                            <text>月收入 {{ user.myInfo.income }}元</text>
                        </view>
                        <!-- 身高 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.height">
                            <text>📏</text>
                            <text>{{ user.myInfo.height }}cm</text>
                        </view>
                        <!-- 体重 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.weight">
                            <text>⚖️</text>
                            <text>{{ user.myInfo.weight }}kg</text>
                        </view>
                        <!-- 家庭情况 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.family">
                            <text>👨‍👩‍👧‍👦</text>
                            <text>{{ user.myInfo.family }}</text>
                        </view>
                        <!-- 犯罪记录 -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.criminal">
                            <text>📋</text>
                            <text>犯罪记录：{{ user.myInfo.criminal }}</text>
                        </view>
                        <!-- 身份证号（脱敏显示） -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.idCard">
                            <text>🆔</text>
                            <text>身份证：{{ user.myInfo.idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1****$2') }}</text>
                        </view>
                        <!-- 手机号（脱敏显示） -->
                        <view class="basic-item" v-if="user.myInfo && user.myInfo.phone">
                            <text>📱</text>
                            <text>手机：{{ user.myInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 兴趣标签 -->
            <view class="section">
                <view class="section-header">
                    <text class="section-title">兴趣标签</text>
                    <!-- <text class="edit-link" @click="editSection('兴趣标签')">编辑></text> -->
                </view>
                <view class="section_box">
                    <text class="about-me">你还没有添加标签 添加5个以上的标签更能打动人心</text>
                </view>
            </view>

            <!-- 择偶条件 -->
            <view class="section">
                <view class="section-header">
                    <text class="section-title">择偶条件</text>
                    <!-- <text class="edit-link" @click="mateSelection">编辑></text> -->
                </view>
                <view class="section_box" v-if="user.othInfo && Object.keys(user.othInfo).length > 0">
                    <!-- 动态展示othInfo中的数据 -->
                    <!-- 年龄范围 -->
                    <view class="basic-item" v-if="user.othInfo.age || user.othInfo.ageR">
                        <text>🎂</text>
                        <text>年龄范围：{{ user.othInfo.age ? user.othInfo.age + '岁' : '' }}{{ user.othInfo.ageR ? ' - ' + user.othInfo.ageR + '岁' : '' }}</text>
                    </view>
                    <!-- 身高范围 -->
                    <view class="basic-item" v-if="user.othInfo.height || user.othInfo.heightR">
                        <text>📏</text>
                        <text>身高范围：{{ user.othInfo.height ? user.othInfo.height + 'cm' : '' }}{{ user.othInfo.heightR ? ' - ' + user.othInfo.heightR + 'cm' : '' }}</text>
                    </view>
                    <!-- 收入范围 -->
                    <view class="basic-item" v-if="user.othInfo.income || user.othInfo.incomeR">
                        <text>💰</text>
                        <text>收入范围：{{ user.othInfo.income ? user.othInfo.income + '元' : '' }}{{ user.othInfo.incomeR ? ' - ' + user.othInfo.incomeR + '元' : '' }}</text>
                    </view>
                    <!-- 学历要求 -->
                    <view class="basic-item" v-if="user.othInfo.degree">
                        <text>🎓</text>
                        <text>学历要求：{{ user.othInfo.degree }}</text>
                    </view>
                    <!-- 婚姻状况要求 -->
                    <view class="basic-item" v-if="user.othInfo.marriage">
                        <text>💍</text>
                        <text>婚姻状况：{{ user.othInfo.marriage }}</text>
                    </view>
                    <!-- 子女情况要求 -->
                    <view class="basic-item" v-if="user.othInfo.childs">
                        <text>👶</text>
                        <text>子女情况：{{ user.othInfo.childs }}</text>
                    </view>
                    <!-- 职业要求 -->
                    <view class="basic-item" v-if="user.othInfo.career">
                        <text>💼</text>
                        <text>职业要求：{{ user.othInfo.career }}</text>
                    </view>
                    <!-- 资产要求 -->
                    <view class="basic-item" v-if="user.othInfo.asset">
                        <text>🏠</text>
                        <text>资产要求：{{ user.othInfo.asset }}</text>
                    </view>
                    <!-- 家庭情况要求 -->
                    <view class="basic-item" v-if="user.othInfo.family">
                        <text>👨‍👩‍👧‍👦</text>
                        <text>家庭情况：{{ user.othInfo.family }}</text>
                    </view>
                    <!-- 犯罪记录要求 -->
                    <view class="basic-item" v-if="user.othInfo.criminal">
                        <text>📋</text>
                        <text>犯罪记录：{{ user.othInfo.criminal }}</text>
                    </view>
                    <!-- 体重范围 -->
                    <view class="basic-item" v-if="user.othInfo.weight || user.othInfo.weightR">
                        <text>⚖️</text>
                        <text>体重范围：{{ user.othInfo.weight ? user.othInfo.weight + 'kg' : '' }}{{ user.othInfo.weightR ? ' - ' + user.othInfo.weightR + 'kg' : '' }}</text>
                    </view>
                    <!-- 地址要求 -->
                    <view class="basic-item" v-if="user.othInfo.address">
                        <text>📍</text>
                        <text>地址要求：{{ user.othInfo.address }}</text>
                    </view>
                    <!-- 特征要求 -->
                    <view class="basic-item" v-if="user.othInfo.feature">
                        <text>✨</text>
                        <text>特征要求：{{ user.othInfo.feature }}</text>
                    </view>
                    <!-- 描述要求 -->
                    <view class="basic-item" v-if="user.othInfo.description">
                        <text>📝</text>
                        <text>其他要求：{{ user.othInfo.description }}</text>
                    </view>
                </view>
                <view class="section_box" v-else>
                    <!-- 无数据时展示 -->
                    <h3 class="placeholder">想认识更多优秀的TA吗？</h3>
                    <p class="about-me">
                        说说您理想的另一半是什么样子的。我们将根据您的择偶条件为您推荐更适合的TA。
                    </p>
                </view>
            </view>


            <!-- 我的认证弹窗 -->
            <!-- <tui-drawer mode="right" :visible="attestations" @close="closeDrawer">
                <view class="picture_box">
                    <view class="box_box"></view>
                    <view class="picture_box_box">
                        <h1 style="text-align: center;">认证中心</h1>
                        <p>月娘婚恋实名制婚恋平台，为了保障大家相亲安全，营造严肃靠谱婚恋环境，杜绝资料虚假用户，远离骗子与婚托，真诚安全有保障，完成实名认证后解锁更多权限~</p>
                    </view>
                    <view class="rzzx">
                        <view class="service-list">
                            <view class="service-list-box" v-for="(item, index) in attestationsList" :key="index">
                                <view class="iconImg" :class="item.icon"></view>
                                <view class="wb">
                                    <h3>{{ item.name }}</h3>
                                    <p style="font-size: 10px;color: #606060;">{{ item.bt }}</p>
                                </view>
                                <view class="btn" @click="autonym">去认证</view>
                            </view>
                        </view>
                    </view>
                    <view class="footer">
                        <button class="save-button" @click="attestations = false">关闭</button>
                    </view>
                </view>
            </tui-drawer> -->

            <!-- 关于我 弹窗 -->
            <tui-drawer mode="right" :visible="aboutme">
                <view class="aboutme-box">
                    <view class="aboutme-box-box">
                        <h1>关于自己</h1>
                        <textarea class="textarea" placeholder="做个自我介绍吧，让对方更了解你..." maxlength="200"
                            v-model="userInfo"></textarea>
                        <h1>自我介绍示例</h1>
                        <p>我是北京人，双鱼座，喜欢浪漫，我对工作尽职尽责，偶尔工作强度比较大，但是我觉得没问题，我事业心比较强，有些理想主义，比较有责任担当，目前月收入2万，职业发展也不错，稳步提升，北京有房有车，父母为人和善，希望在这里可以寻找那个可以分享美好的人
                        </p>
                        <view class="sub">提交</view>
                        <!-- 底部固定保存按钮 -->
                        <view class="footer">
                            <button class="save-button" @click="aboutme = false">关闭</button>
                        </view>
                    </view>
                </view>
            </tui-drawer>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                user: {
                    name: '',
                    sex: null,
                    cover: [],
                    myInfo: {},
                    othInfo: {},
                    vip: null,
                    score: null,
                    rate: null,
                    pv: null,
                    recommendCount: null,
                    wishCount: null,
                    collectCount: null
                },

                // 我的认证弹窗控制
                // attestations: false,
                // 关于我弹窗控制
                aboutme: false,
                // 我的认证弹窗内容
                // attestationsList: [{
                //     name: '实名未认证',
                //     icon: 'iconfont icon-renzheng',
                //     bt: '通过公安系统验证证件真实性，确保信息真实才能获得更多异性的青睐，大幅度提升脱单率~',
                // },
                // {
                //     name: '真颜未认证',
                //     icon: 'iconfont icon-renzheng',
                //     bt: '接入腾讯云，通过人脸对比，验证用户头像对比实名认证即为用户本人真实照片',
                // },
                // {
                //     name: '学历未认证',
                //     icon: 'iconfont icon-renzheng',
                //     bt: '展示学历真实性，获得更多优质匹配机会。支持学信网在线验证码、毕业证、学生证等多种认证方式',
                // },
                // {
                //     name: '工作未认证',
                //     icon: 'iconfont icon-renzheng',
                //     bt: 'IT/金融/体制内等职场单身聚集地',
                // },
                // ],
                // verifications: [{
                //     label: '实名',
                //     icon: 'iconfont icon-renzheng',
                //     bgColor: '#E8F3FF',
                // },
                // {
                //     label: '真颜',
                //     icon: 'iconfont icon-renzheng',
                //     bgColor: '#F5F1FF',
                // },
                // {
                //     label: '学历',
                //     icon: 'iconfont icon-renzheng',
                //     bgColor: '#F2F2F2',
                // },
                // {
                //     label: '工作',
                //     icon: 'iconfont icon-renzheng',
                //     bgColor: '#F2F2F2',
                // },
                // ],
            };
        },
        onShow() {
            this.loadUser();
        },
        methods: {
            // 预览图片
            previewImage(index) {
                uni.previewImage({
                    current: this.user.cover[index], // 当前显示图片的URL
                    urls: this.user.cover,          // 需要预览的图片列表
                });
            },
            // 加载用户数据
            loadUser() {
                const userData = this.f.storage('user_data');
                if (userData && userData.userId) {
                    this.isLoggedIn = true;
                    this.$api.req(
                        '/dating/member/get',
                        { userId: userData.userId },
                        'get',
                        'JSON',
                        false
                    ).then((res) => {
                        if (res.code === 0) {
                            // 直接使用接口返回的数据结构
                            this.user = {
                                name: res.data.name || '',
                                sex: res.data.sex,
                                cover: res.data.cover || [],
                                myInfo: res.data.myInfo || {},
                                othInfo: res.data.othInfo || {},
                                vip: res.data.vip,
                                score: res.data.score,
                                rate: res.data.rate,
                                pv: res.data.pv,
                                recommendCount: res.data.recommendCount,
                                wishCount: res.data.wishCount,
                                collectCount: res.data.collectCount
                            };
                        }
                    });
                }
            },
            // 我的认证弹窗控制
            // attestation() {
            //     this.attestations = true
            // },
            // 关于我弹窗控制
            onaboutme() {
                this.aboutme = true
            },
            // 基本资料
            editSection(name) {
                console.log(name);

                if (name == '兴趣标签') {
                    uni.navigateTo({
                        url: '/subPackage1/editTags/editTags'
                    })
                } else {
                    uni.navigateTo({
                        url: '/subPackage1/basics/basics'
                    })
                }
                // uni.navigateTo({
                // 	url: '/subPackage1/basics/basics'
                // })
            },
            // autonym() {
            //     uni.navigateTo({
            //         url: '/subPackage1/autonym/autonym'
            //     })
            // },
            mateSelection() {
                uni.navigateTo({
                    url: '/subPackage1/mateSelection/mateSelection'
                })
            }
        }
    };
</script>

<style scoped>
    .box {
        width: 100vw;
        height: 100%;
        background-color: #fafbff;
    }

    .bg {
        width: 100vw;
        height: 200px;
        background: linear-gradient(to right, #dff6ff, #f0eaff);
        position: absolute;
        z-index: 1;
    }

    .bg>p {
        text-align: center;
        margin-top: 30px;
        color: #606060;
    }

    .box-box {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        padding-top: 120px;
        padding-bottom: 50px;
        z-index: 5;
    }

    /* 顶部个人信息 */
    .header {
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        text-align: center;
        background-color: #fff;
    }

    .avatar-container {
        margin-top: -50px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
        object-fit: cover;
        display: block;
    }

    .edit-icon {
        position: absolute;
        bottom: 0;
        right: 30%;
        width: 40rpx;
        height: 40rpx;
    }

    .edit-image {
        width: 100%;
        height: 100%;
    }

    /* 用户基本信息 */
    .user-basic-info {
        text-align: center;
        margin-top: 20rpx;
    }

    .user-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 15rpx;
    }

    .user-details {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .user-detail-item {
        font-size: 24rpx;
        color: #666;
        background: #f0f0f0;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
    }

    .vip-badge {
        background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
        color: #333 !important;
        font-weight: bold;
    }

    /* 统计信息 */
    .stats-section {
        display: flex;
        justify-content: space-around;
        margin-top: 20rpx;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 15rpx;
    }

    .stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    .stats-number {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
    }

    .stats-label {
        font-size: 22rpx;
        color: #666;
    }

    .info-text {
        font-size: 26rpx;
        color: #666;
        line-height: 36rpx;
    }

    .info_box {
        width: 95%;
        height: 50px;
        border-radius: 5px;
        background: #fafbff;
        margin: 0 auto 20px auto;
    }

    /* 通用区块样式 */
    .section {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
    }

    .section-title::before {
        content: "";
        display: inline-block;
        width: 6rpx;
        height: 24rpx;
        background-color: #8f5be7;
        margin-right: 15rpx;
    }

    .section_box {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
        color: #606060;
        padding-bottom: 10px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .section-title {
        font-size: 30rpx;
        font-weight: bold;
    }

    .basic-item {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        background-color: #f4f4f4;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
    }

    .edit-link {
        font-size: 26rpx;
        color: #7f8fff;
    }

    .basic-info-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
    }

    /* 我的相册 */
    .photo-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .photo-item {
        width: 150rpx;
        height: 150rpx;
        background-color: #f8f8f8;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .rzzx {
        width: 100%;
        /* height: 500px; */
        background: #fff;
        margin-top: 20px;
        border-radius: 15px 15px;
    }

    /* 我的认证 */
    .icons-container {
        display: flex;
        justify-content: space-around;
    }

    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .icon-circle {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon {
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        font-size: 18px;
    }

    .icon-text {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #333;
    }

    /* 我的认证弹窗 */
    .box_box {
        width: 100%;
        height: 120px;
        background: linear-gradient(to right, #dff6ff, #f0eaff);
        position: absolute;
    }

    .service-list {
        width: 95%;
        height: 100%;
        margin: 0 auto;
        padding-top: 5px;
    }

    .service-list-box {
        width: 100%;
        height: 70px;
        border-radius: 5px;
        margin-top: 10px;
        background: #f5f5f5;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .iconImg {
        font-size: 35px;
        border-radius: 50px;
    }

    .wb {
        width: 65%;
        height: 80%;
        /* background: #7f8fff; */
    }

    .btn {
        width: 60px;
        height: 25px;
        border-radius: 25px;
        text-align: center;
        color: #fff;
        line-height: 25px;
        font-size: 11px;
        background: linear-gradient(to right, #7F8FFF, #AE6CFF);
    }


    /* 关于我 */
    .about-me {
        font-size: 26rpx;
        color: #666;
    }

    /* 关于我 弹窗 */
    .aboutme-box {
        width: 100vw;
        height: 100%;
    }

    .aboutme-box-box {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        /* background: red; */
    }

    .aboutme-box-box>h1 {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .textarea {
        width: 90%;
        height: 200px;
        padding: 15px;
        margin: 0 auto;
        background: #fafbff;
    }

    .aboutme-box-box>p {
        font-size: 13px;
    }

    .sub {
        width: 80%;
        height: 50px;
        margin: 0 auto;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        margin-top: 50px;
        background: #e7e7e7;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
        padding: 20rpx;
    }

    .save-button {
        width: 100%;
        height: 60rpx;
        background-color: #3c9cff;
        color: #fff;
        font-size: 28rpx;
        text-align: center;
        border: none;
        border-radius: 30rpx;
    }

    .photo-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }

    .uploaded-image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
        object-fit: cover;
    }

    .photo-item {
        width: 150rpx;
        height: 150rpx;
        background-color: #f8f8f8;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>